<template>
  <div class="login_container">
    <div class="login_box">
      <div class="left_content">
        <h1>{{ setting.title }}</h1>
        <h2>Open system management</h2>
        <h3>登录</h3>
        <el-form :model="loginForm" :rules="rules" ref="loginForms">
          <el-form-item prop="username">
            <el-input :prefix-icon="User" placeholder="账号" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" :prefix-icon="Lock" placeholder="密码" v-model="loginForm.password"
                      show-password></el-input>
          </el-form-item>
          <!-- 验证码模块 -->
          <el-form-item prop="checkcode" v-if="isShowCode">
            <el-input placeholder="验证码" :prefix-icon="CircleCheck" v-model.trim="loginForm.checkcode"
                      style="width: 60%"></el-input>
            <div class="login-code">
              <img :src="checkCodeUrl" @click="getCode()"/>
            </div>
          </el-form-item>
          <!-- 记住密码模块 -->
          <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
          <el-form-item
              v-if="isRegister"
              style="display: flex; gap: 12px; width: 100%; margin-top: -15px"
          >
            <el-button :loading="loading" style="flex: 1" class="login_btn" type="primary" @click="login">登录
            </el-button>
            <el-button :loading="loadingRe" style="flex: 1" class="login_btn" type="primary" @click="goRegister">注册
            </el-button>
          </el-form-item>
          <el-form-item v-else>
            <el-button :loading="loading" class="login_btn" type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right_content">
        <img src="../../../assets/images/login_bg.svg" alt="login background">
      </div>
    </div>
  </div>
</template>

<script setup>
//引入设置标题与logo这配置文件
import {CircleCheck, Lock, User} from '@element-plus/icons-vue';
import {onMounted, ref} from 'vue';
import {useRouter} from 'vue-router';
import {ElNotification} from 'element-plus';
//引入获取当前时间的函数
import {getTime} from '@/utils/time.js';
//引入用户相关的小仓库
import useUserStore from "@/store/modules/user.js";
import {
  GET_PASSWORD,
  GET_REMEMBER,
  GET_USER,
  REMOVE_PASSWORD,
  REMOVE_REMEMBER,
  REMOVE_USER,
  SET_PASSWORD,
  SET_REMEMBER,
  SET_USER
} from "@/utils/token.js";
import {checkCode} from "@/api/user/index.js";
import setting from "@/setting.js";
// 修改引入的接口
import {getSystemConfigList} from "@/api/system/config/index.js";

let useStore = useUserStore();
//是否显示验证码
let isShowCode = ref(false);
//是否开启注册
let isRegister = ref(false);
//获取el-form组件
let loginForms = ref();
//获取路由器
let $router = useRouter();
//定义变量控制按钮加载效果
let loading = ref(false);
let loadingRe = ref(false);
//收集账号与密码的数据
let loginForm = ref({username: 'admin', password: 'admin123', checkcode: '', uuid: ''});
//记住我
let rememberMe = ref(false);
//验证码图片(存的是一个路径)
let checkCodeUrl = ref();

const goRegister = () => {
  $router.push('/register'); // 跳转到注册页
};


//登录按钮回调
const login = async () => {
  if (loading.value) {
    return;
  }
  //保证全部表单相校验通过再发请求
  await loginForms.value.validate();
  //加载效果:开始加载
  loading.value = true;
  if (rememberMe.value) {
    SET_REMEMBER(String(rememberMe.value));
    SET_USER(loginForm.value.username)
    SET_PASSWORD(loginForm.value.password)
  } else {
    REMOVE_REMEMBER();
    REMOVE_USER();
    REMOVE_PASSWORD();
  }
  //点击登录按钮以后干什么?
  //通知仓库发登录请求
  //请求成功->首页展示数据的地方
  //请求失败->弹出登录失败信息
  try {
    //保证登录成功
    await useStore.userLogin(loginForm.value);
    //编程式导航跳转到展示数据首页

    /*//判断登录的时候,路由路径当中是否有query参数，如果有就往query参数挑战，没有跳转到首页
    let redirect = $route.query.redirect;
    $router.push({path: redirect || '/'});*/

    $router.push({path: '/'});
    //登录成功提示信息
    ElNotification({
      type: 'success',
      message: '欢迎回来',
      title: `HI,${getTime()}`
    });
    //登录成功加载效果也消失
    loading.value = false;
  } catch (error) {
    //登录失败加载效果消息
    loading.value = false;
    //登录失败的提示信息
    ElNotification({
      type: 'error',
      message: error.message
    })
    getCode();
  }
}
//自定义校验规则函数
const validatorUserName = (rule, value, callback) => {
  //rule:即为校验规则对象
  //value:即为表单元素文本内容
  //函数:如果符合条件callBack放行通过即为
  //如果不符合条件callBack方法,注入错误提示信息
  try {
    // 检查是否包含中文字符
    const chineseRegex = /[\u4e00-\u9fa5]/;
    if (chineseRegex.test(value)) {
      callback(new Error('账号不能包含中文字符'));
    }
    if (value.length >= 5) {
      callback();
    } else {
      callback(new Error('账号长度至少五位'));
    }
  } catch {
    callback(new Error('请输入账号'));
  }
}

const validatorPassword = (rule, value, callback) => {
  try {
    if (!value) {
      callback(new Error('请输入密码'));
      return;
    }

    // 检查密码长度
    if (value.length < 6) {
      callback(new Error('密码长度至少六位'));
      return;
    }

    // 检查是否包含中文字符
    const chineseRegex = /[\u4e00-\u9fa5]/;
    if (chineseRegex.test(value)) {
      callback(new Error('密码不能包含中文字符'));
      return;
    }

    callback(); // 密码合法
  } catch {
    callback(new Error('请输入密码'));
  }
}

const validatorCheckCode = (rule, value, callback) => {
  if (value) {
    if (value.length != 4) {
      callback(new Error('验证码长度为四位'));
    } else {
      callback();
    }
  } else {
    callback(new Error('请输入验证码'));
  }
}

//定义表单校验需要配置对象
const rules = {
  //规则对象属性:
  //required,代表这个字段务必要校验的
  //min:文本长度至少多少位
  //max:文本长度最多多少位
  //message:错误的提示信息
  //trigger:触发校验表单的时机 change->文本发生变化触发校验,blur:失去焦点的时候触发校验规则
  username: [
    // { required: true, min: 6, max: 10, message: '账号长度至少六位', trigger: 'change' }
    {trigger: 'blur', validator: validatorUserName}
  ],
  password: [
    // { required: true, min: 5, max: 15, message: '密码长度至少5位', trigger: 'change' }
    {trigger: 'blur', validator: validatorPassword}
  ],
  checkcode: [
    //{ required: true, message: '请输入验证码', trigger: 'blur' }
    {trigger: 'blur', validator: validatorCheckCode}
  ]
}
//获取验证码
const getCode = async () => {
  //checkCodeUrl.value = EXPORT_API.CODE_URL + "?time=" + new Date().getTime();
  const result = await checkCode()
  if (result.code == setting.SYSTEM_SUCCESS) {
    checkCodeUrl.value = "data:image/gif;base64," + result.data.img
    loginForm.value.uuid = result.data.uuid
  }
}

const getSystemConfig = async () => {
   try {
    const result = await getSystemConfigList(['CheckCode', 'Register']);
    if (result.code === setting.SYSTEM_SUCCESS) {
      const configData = result.data;
      if (configData[0] && configData[0] !== 'false') {
        isShowCode.value = true;
        getCode();
      }
      if (configData[1] && configData[1] !== 'false') {
        isRegister.value = true;
      }
    }
  } catch (error) {
    console.error(error);
  }
}

onMounted(() => {
  const username = GET_USER();
  const password = GET_PASSWORD();
  const remember = GET_REMEMBER()
  //记住密码实现
  loginForm.value.username = username === null ? loginForm.value.username : username;
  loginForm.value.password = password === null ? loginForm.value.password : password;
  rememberMe.value = remember === null ? false : Boolean(rememberMe);
  getSystemConfig();
})
</script>
<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom right, #cbe0f5, #f0f2f5);
  display: flex;
  align-items: center;
  justify-content: center;

  .login_box {
    width: 1000px;
    height: 500px;
    background: #fff;
    border-radius: 16px;
    display: flex;
    box-shadow: 0 8px 24px rgba(149, 157, 165, 0.1);
    overflow: hidden;

    .left_content {
      width: 45%;
      padding: 40px;
      background: #fff;

      h1 {
        font-size: 24px;
        color: #333;
        margin-bottom: 8px;
      }

      h2 {
        font-size: 14px;
        color: #999;
        margin-bottom: 40px;
      }

      h3 {
        font-size: 16px;
        color: #333;
        margin-bottom: 24px;
        font-weight: bold;
      }

      .el-form-item {
        margin-bottom: 20px;
      }

      .login_btn {
        width: 100%;
        height: 40px;
        border-radius: 4px;
        margin-top: 20px;
        background: #6c5ce7;
        border: none;
        font-size: 16px;

        &:hover {
          background: #5b4cc4;
        }
      }

      .login-code {
        width: 35%;
        height: 40px;
        float: right;
        margin-left: 12px;
        margin-right: 2px;

        img {
          width: 100%;
          height: 100%;
          cursor: pointer;
          border-radius: 4px;
          vertical-align: middle;
        }
      }

      .el-checkbox {
        margin: 0 0 20px;
        color: #666;
      }

      :deep(.el-input__wrapper) {
        background-color: #f5f7fa;
        border: none;
        box-shadow: none;
        height: 40px;
      }

      :deep(.el-input__inner) {
        height: 40px;
        line-height: 40px;
      }
    }

    .right_content {
      flex: 1;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        border-radius: 50%;
        z-index: 0;
      }

      img {
        width: 80%;
        height: auto;
        position: relative;
        z-index: 1;
      }
    }
  }
}
</style>
